import { useState, useContext, useEffect } from 'react';
import { Link, useNavigate, useParams } from 'react-router-dom';
import { AuthContext } from '@/contexts/authContext';
import { ThemeContext } from '@/App';
import { Toaster, toast } from 'sonner';
import { 
  ChevronLeft, 
  Volume2, 
  Share2, 
  Heart, 
  Settings, 
  Brain,
  RefreshCw,
  MessageSquare,
  MessageCircle,
  Sparkles,
  Moon,
  Sun
} from 'lucide-react';
import type { GeneratedStory, CharacterDialogue } from '@/lib/aiUtils';
import { getCachedImage, cacheImage, generateImageUrl, getDefaultImageUrl, preGenerateStoryImages, generateCharacterResponse, expandStoryContent, generateImageWithAgent } from '@/lib/aiUtils';

export default function ReadingPage() {
  const { isAuthenticated } = useContext(AuthContext);
  const { isDark, toggleDarkMode } = useContext(ThemeContext);
  const navigate = useNavigate();
  const { storyId } = useParams();
  
  // 检查用户是否已认证，阅读故事需要登录
  useEffect(() => {
    if (!isAuthenticated) {
      navigate('/login');
    }
  }, [isAuthenticated, navigate]);
  
  // 故事内容状态
  const [currentPage, setCurrentPage] = useState(1);
  const [fontSize, setFontSize] = useState<'small' | 'medium' | 'large'>('medium');
  const [isCollected, setIsCollected] = useState(false);
  const [isReading, setIsReading] = useState(false);
  const [showAssistant, setShowAssistant] = useState(false);
  const [generatedStory, setGeneratedStory] = useState<GeneratedStory | null>(null);
  const [isLoading, setIsLoading] = useState(true);
  
  // 故事标题和内容
  const [storyTitle, setStoryTitle] = useState('加载中...');
  const [storyContent, setStoryContent] = useState<string[]>([]);
  const [totalPages, setTotalPages] = useState(7);
  
  // 故事配图状态
  const [illustrationPrompt, setIllustrationPrompt] = useState('');
  const [isGeneratingImage, setIsGeneratingImage] = useState(false);
  const [showFullImage, setShowFullImage] = useState(false);
  
  // 新的AI功能：角色对话系统
  const [showCharacterChat, setShowCharacterChat] = useState(false);
  const [chatMessages, setChatMessages] = useState<CharacterDialogue[]>([]);
  const [userMessage, setUserMessage] = useState('');
  const [isGeneratingReply, setIsGeneratingReply] = useState(false);
  const [selectedCharacter, setSelectedCharacter] = useState<string>('小狐狸');
  
  // 新的AI功能：故事扩展系统
  const [showStoryExpander, setShowStoryExpander] = useState(false);
  const [expandedContent, setExpandedContent] = useState<string>('');
  const [isExpandingContent, setIsExpandingContent] = useState(false);
  const [expandType, setExpandType] = useState<'background' | 'dialogue' | 'description' | 'ending'>('background');

  // 对话框位置状态
  const [chatPosition, setChatPosition] = useState({ x: 'right-4', y: 'top-20' });
  const [expanderPosition, setExpanderPosition] = useState({ x: 'right-4', y: 'top-20' });
  const [assistantPosition, setAssistantPosition] = useState({ x: 'right-4', y: 'top-20' });
  const [isDragging, setIsDragging] = useState<'chat' | 'expander' | 'assistant' | null>(null);
  const [dragOffset, setDragOffset] = useState({ x: 0, y: 0 });

  // 故事阅读进度状态
  const [readingProgress, setReadingProgress] = useState<Record<string, number>>({});
  
  // 检查用户是否已认证
  useEffect(() => {
    if (!isAuthenticated) {
      navigate('/login');
    }
  }, [isAuthenticated, navigate]);
  
  // 加载故事内容
  useEffect(() => {
    if (!storyId) return;
    
    setIsLoading(true);
    
     try {
      // 首先尝试从localStorage中获取生成的故事
      if (storyId.startsWith('story_')) {
        const savedStory = localStorage.getItem('generatedStory');
        if (savedStory) {
          const parsedStory: GeneratedStory = JSON.parse(savedStory);
          setGeneratedStory(parsedStory);
          setStoryTitle(parsedStory.title);
          setStoryContent(parsedStory.content);
          setTotalPages(parsedStory.pageCount);
          
          // 为插图生成增强的提示词
          const currentContent = parsedStory.content[currentPage - 1] || '';
          
          const enhanceForImageGeneration = (text: string): string => {
            // 解析故事中可能包含的关键元素
            const charactersMatch = text.match(/([^\s]+小[狐狸熊兔子海豚松鼠鹰猫]|[^\s]+公主|[^\s]+王子|[^\s]+侠)/);
            const settingMatch = text.match(/(森林|海洋|天空|城堡|山洞|草原|花园|村庄)/);
            const actionMatch = text.match(/(玩耍|冒险|发现|帮助|战斗|寻找|遇见|探索)/);
            
            let character = charactersMatch ? charactersMatch[0] : '可爱的小动物';
            let setting = settingMatch ? settingMatch[0] : '美丽的自然环境';
            let action = actionMatch ? actionMatch[0] : '快乐地生活';
            
            // 为AI图像生成创建更丰富的提示词
            const styleWords = ['童话风格', '儿童插画', '色彩鲜艳', '可爱风格', '梦幻场景'];
            const selectedStyle = styleWords[Math.floor(Math.random() * styleWords.length)];
            
            return `${selectedStyle}, 高清插画, ${character}在${setting}里${action}, 充满想象力, 温馨治愈, 适合儿童观看, 细节丰富, 明亮色调`;
          };
          
          const enhancedPrompt = enhanceForImageGeneration(currentContent);
          setIllustrationPrompt(`${enhancedPrompt} 童话故事:《${parsedStory.title}》, 关键词:${parsedStory.keywords.join(', ')}`);
        }
      } else if (storyId === 'generated') {
        // 兼容旧的生成故事ID
        const savedStory = localStorage.getItem('generatedStory');
        if (savedStory) {
          const parsedStory: GeneratedStory = JSON.parse(savedStory);
          setGeneratedStory(parsedStory);
          setStoryTitle(parsedStory.title);
          setStoryContent(parsedStory.content);
          setTotalPages(parsedStory.pageCount);
          
          // 为插图生成增强的提示词
          const currentContent = parsedStory.content[currentPage - 1] || '';
          
          const enhanceForImageGeneration = (text: string): string => {
            // 解析故事中可能包含的关键元素
            const charactersMatch = text.match(/([^\s]+小[狐狸熊兔子海豚松鼠鹰猫]|[^\s]+公主|[^\s]+王子|[^\s]+侠)/);
            const settingMatch = text.match(/(森林|海洋|天空|城堡|山洞|草原|花园|村庄)/);
            const actionMatch = text.match(/(玩耍|冒险|发现|帮助|战斗|寻找|遇见|探索)/);
            
            let character = charactersMatch ? charactersMatch[0] : '可爱的小动物';
            let setting = settingMatch ? settingMatch[0] : '美丽的自然环境';
            let action = actionMatch ? actionMatch[0] : '快乐地生活';
            
            // 为AI图像生成创建更丰富的提示词
            const styleWords = ['童话风格', '儿童插画', '色彩鲜艳', '可爱风格', '梦幻场景'];
            const selectedStyle = styleWords[Math.floor(Math.random() * styleWords.length)];
            
            return `${selectedStyle}, 高清插画, ${character}在${setting}里${action}, 充满想象力, 温馨治愈, 适合儿童观看, 细节丰富, 明亮色调`;
          };
          
          const enhancedPrompt = enhanceForImageGeneration(currentContent);
          setIllustrationPrompt(`${enhancedPrompt} 童话故事:《${parsedStory.title}》, 关键词:${parsedStory.keywords.join(', ')}`);
        }
      } else {
        // 加载预设故事
        loadPresetStory(storyId);
      }
      
      // 检查故事是否已收藏
      checkIfCollected(storyId);
    } catch (error) {
      console.error('Failed to load story:', error);
      toast('加载故事失败，请稍后再试');
    } finally {
      setIsLoading(false);
    }
  }, [storyId, navigate]);
  
   // 当页面改变时，更新插图提示词并保存阅读进度
  useEffect(() => {
    if (generatedStory) {
      const currentContent = generatedStory.content[currentPage - 1] || '';
      
      // 为AI图像生成创建增强的提示词
      const enhanceForImageGeneration = (text: string): string => {
        // 解析故事中可能包含的关键元素
        const charactersMatch = text.match(/([^\s]+小[狐狸熊兔子海豚松鼠鹰猫]|[^\s]+公主|[^\s]+王子|[^\s]+侠)/);
        const settingMatch = text.match(/(森林|海洋|天空|城堡|山洞|草原|花园|村庄)/);
        const actionMatch = text.match(/(玩耍|冒险|发现|帮助|战斗|寻找|遇见|探索)/);
        
        let character = charactersMatch ? charactersMatch[0] : '可爱的小动物';
        let setting = settingMatch ? settingMatch[0] : '美丽的自然环境';
        let action = actionMatch ? actionMatch[0] : '快乐地生活';
        
        // 为AI图像生成创建更丰富的提示词
        const styleWords = ['童话风格', '儿童插画', '色彩鲜艳', '可爱风格', '梦幻场景'];
        const selectedStyle = styleWords[Math.floor(Math.random() * styleWords.length)];
        
        // 完全使用中文描述，避免任何英文出现
        return `${selectedStyle}, 高清插画, ${character}在${setting}里${action}, 充满想象力, 温馨治愈, 适合儿童观看, 细节丰富, 明亮色调`;
      };
      
      const enhancedPrompt = enhanceForImageGeneration(currentContent);
      setIllustrationPrompt(`${enhancedPrompt} 童话故事:《${generatedStory.title}》, 关键词:${generatedStory.keywords.join(', ')}`);
      
      // 保存阅读进度
      saveReadingProgress(storyId || '', currentPage);
    }
  }, [currentPage, generatedStory, storyId]);

  // 加载故事时恢复阅读进度
  useEffect(() => {
    if (storyId && !isLoading) {
      const savedProgress = loadReadingProgress(storyId);
      if (savedProgress > 0) {
        setCurrentPage(savedProgress);
        toast(`已恢复到上次阅读位置：第${savedProgress}页`);
      }
    }
  }, [isLoading, storyId]);

  // 保存阅读进度到localStorage
  const saveReadingProgress = (id: string, page: number) => {
    try {
      const progressData = localStorage.getItem('readingProgress');
      const progress: Record<string, number> = progressData ? JSON.parse(progressData) : {};
      progress[id] = page;
      localStorage.setItem('readingProgress', JSON.stringify(progress));
      setReadingProgress(progress);
    } catch (error) {
      console.error('Failed to save reading progress:', error);
    }
  };

  // 从localStorage加载阅读进度
  const loadReadingProgress = (id: string): number => {
    try {
      const progressData = localStorage.getItem('readingProgress');
      const progress: Record<string, number> = progressData ? JSON.parse(progressData) : {};
      setReadingProgress(progress);
      return progress[id] || 0;
    } catch (error) {
      console.error('Failed to load reading progress:', error);
      return 0;
    }
  };
  
  // 加载预设故事
  const loadPresetStory = (id: string) => {
    // 根据ID设置故事标题
    let title = '';
    let content: string[] = [];
    let pageCount = 7;
    
    // 每次加载时随机选择一个版本，确保内容不重复
    const version = Math.floor(Math.random() * 2);
    
    switch(id) {case '1':
        title = '小狐狸的星空冒险';
        if (version === 0) {
          content = [
            '在一个星光璀璨的夜晚，小狐狸星星望着天空中闪烁的星星，心中充满了好奇。突然，一颗金色的星星从天空中坠落，落在了森林边缘。',
            '星星小心翼翼地走到坠落的星星旁，发现它是一个会发光的小盒子。盒子上刻着奇怪的符号，似乎在召唤着什么。',
            '当星星轻轻触碰盒子时，一道金色的光芒闪过，它发现自己来到了一个神奇的星空王国。这里的一切都是由星星组成的，美丽极了！',
            '星空王国的国王告诉星星，他们的王国正面临着危机 - 黑暗势力正在吞噬星星的光芒。只有勇敢的心灵才能拯救他们。',
            '星星决定帮助星空王国。在朋友们的帮助下，它收集了彩虹的七种颜色，制作成了一把神奇的光之剑。',
            '在与黑暗势力的战斗中，星星凭借着智慧和勇气，成功地将黑暗势力赶出了星空王国。星星们重新焕发出耀眼的光芒。',
            '为了感谢星星的帮助，星空国王送给它一颗神奇的星星种子。当星星回到地球后，将种子种下，它长成了一棵永远不会枯萎的星星树。'
          ];
        } else {
          content = [
            '小狐狸阿星是森林里最喜爱仰望星空的动物。每个晴朗的夜晚，它都会坐在山顶上，数着天上的星星，想象着星空之外的世界。',
            '一天晚上，当阿星正看得出神时，一颗流星划过夜空，落在了不远处的草地上。阿星赶紧跑过去，发现流星变成了一只受伤的小星星。',
            '小星星告诉阿星，它来自遥远的星空之国，在执行任务时受了伤。如果不能及时返回，星空之国的魔法屏障就会消失，整个王国将陷入黑暗。',
            '善良的阿星决定帮助小星星返回星空之国。它们一起制作了一个由月光和梦想编织的飞船，开始了这段奇妙的星际旅程。',
            '在旅途中，它们遇到了许多有趣的星座朋友，每个星座都给了它们珍贵的礼物，帮助它们克服了重重困难。',
            '最终，阿星成功地将小星星送回了星空之国。为了感谢阿星的帮助，星空之王授予了阿星"星空守护者"的称号。',
            '从此以后，阿星不仅是森林里的小狐狸，还是星空之国的荣誉居民。它经常在夜晚仰望星空，与它的星空朋友们打招呼。'
          ];
        }
        break;
      case '2':
        title = '小熊的魔法森林奇遇';
        if (version === 0) {
          content = [
            '小熊贝贝在森林里玩耍时，发现了一个隐藏在灌木丛中的神秘入口。好奇心驱使它走了进去，发现了一个它从未见过的魔法森林。',
            '魔法森林里的树木会说话，花朵会跳舞，连石头都会唱歌。贝贝感到既惊讶又兴奋，它决定探索这个神奇的地方。',
            '在探险过程中，贝贝遇到了一位善良的树精灵。树精灵告诉它，魔法森林正在逐渐消失，因为有人偷走了森林之心。',
            '为了拯救魔法森林，贝贝踏上了寻找森林之心的旅程。它需要通过三个考验：智慧、勇气和善良。',
            '在第一个考验中，贝贝用智慧解决了老橡树的谜语；在第二个考验中，它勇敢地面对了凶猛的荆棘怪；在第三个考验中，它用善良帮助了受伤的小兔子。',
            '通过了所有考验后，贝贝找到了森林之心。当它将森林之心放回原处时，魔法森林重新焕发出了生机。',
            '作为奖励，树精灵赋予了贝贝与自然沟通的能力。从此，贝贝成为了魔法森林的守护者，与森林里的所有生物和谐相处。'
          ];
        } else {
          content = [
            '小熊嘟嘟最喜欢在森林里寻宝了。一天，它在一本古老的书中发现了一张魔法森林的地图。地图上标注着一个隐藏的宝藏，据说只有心地善良的生物才能找到。',
            '嘟嘟决定去寻找这个宝藏。它按照地图的指引，穿过了一片迷雾森林，来到了一个美丽而神秘的地方 - 这里就是魔法森林。',
            '在魔法森林里，嘟嘟遇到了许多会说话的动物和植物。它们告诉嘟嘟，要找到宝藏，必须先帮助森林里的居民解决三个难题。',
            '第一个难题是帮助迷路的松鼠宝宝找到回家的路；第二个难题是治愈生病的老橡树；第三个难题是让干涸的小溪重新流淌。',
            '嘟嘟用它的智慧和善良，一个一个地解决了这些难题。每解决一个难题，森林里的魔法就会增强一分，嘟嘟离宝藏也更近了一步。',
            '当嘟嘟解决了所有的难题后，它发现所谓的宝藏并不是金银财宝，而是森林居民们的友谊和信任。这些才是最珍贵的宝藏。',
            '从此以后，嘟嘟经常来到魔法森林，和它的朋友们一起玩耍，一起守护这片美丽的土地。它明白了，真正的宝藏存在于我们的心中。'
          ];
        }
        break;
      case '3':
        title = '小兔子与彩虹桥的约定';
        if (version === 0) {
          content = [
            '小兔子朵朵是森林里最害羞的动物。它总是独自玩耍，不敢和其他小动物交朋友。直到有一天，它遇到了小松鼠豆豆。',
            '豆豆是个开朗活泼的家伙，它主动和朵朵打招呼，并邀请它一起玩游戏。朵朵虽然有些紧张，但还是答应了。',
            '在玩耍的过程中，朵朵不小心摔倒了，膝盖受了伤。豆豆立刻跑回家拿来了药草，细心地为朵朵包扎伤口。',
            '通过这次经历，朵朵明白了朋友的重要性。它开始尝试着和其他小动物交流，慢慢变得开朗起来。',
            '当冬天来临时，朵朵发现豆豆没有足够的食物储存。于是，它毫不犹豫地将自己储存的食物分给了豆豆。',
            '豆豆非常感动，它对朵朵说："真正的友谊就是互相帮助，分享快乐和困难。" 朵朵点点头，它终于明白了友谊的真谛。',
            '从此以后，朵朵和豆豆成为了最好的朋友。它们一起玩耍，一起学习，一起成长，度过了许多美好的时光。'
          ];
        } else {
          content = [
            '小兔子白白住在森林东边的一个树洞里，小刺猬尖尖住在森林西边的一个地洞里。它们虽然住在同一片森林里，却从来没有见过面。',
            '一天，森林里举办了一场盛大的春季联欢会。白白和尖尖都去参加了，它们在那里第一次相遇。刚开始，它们都很害羞，不敢和对方说话。',
            '联欢会结束后，突然下起了大雨。白白和尖尖都没有带伞，它们躲在同一棵大树下避雨。雨越下越大，它们开始聊天，发现彼此有很多共同的爱好。',
            '雨停后，它们成了好朋友。每天，白白都会给尖尖带来新鲜的胡萝卜，尖尖也会给白白带来美味的坚果。它们一起玩耍，一起学习，一起度过了许多快乐的时光。',
            '夏天的一个下午，白白在森林里迷路了。它害怕极了，大声地喊救命。幸好尖尖听到了它的声音，用自己的刺在地上做标记，带领白白走出了森林。',
            '通过这次经历，它们更加珍惜彼此的友谊。它们明白了，朋友就是在你需要帮助的时候，毫不犹豫地伸出援手的人。',
            '时间一天天过去，白白和尖尖的友谊越来越深厚。它们知道，无论发生什么事情，它们都会永远是最好的朋友。'
          ];
        }
        break;
      case '4':
        title = '小海豚的海底寻宝之旅';
        content = [
          '小海豚蓝蓝和小海龟绿绿是一对好朋友，它们经常一起在大海里玩耍。一天，它们听说在深海里有一座神秘的海底城堡，里面藏着许多宝藏。',
          '蓝蓝和绿绿决定一起去寻找这座海底城堡。它们带上了氧气罐和探照灯，勇敢地向深海游去。',
          '在途中，它们遇到了各种各样的海洋生物：五彩斑斓的热带鱼、缓慢移动的海龟、挥舞着触手的章鱼，还有巨大的鲸鱼。',
          '经过漫长的旅程，它们终于找到了海底城堡。城堡是由闪闪发光的珊瑚和珍珠建成的，美丽极了！',
          '当它们进入城堡时，发现里面真的有许多宝藏。但是，守护城堡的老海龟告诉它们，这些宝藏是海洋的财富，不属于任何人。',
          '蓝蓝和绿绿明白了老海龟的话。它们决定不拿任何宝藏，而是成为城堡的守护者，保护这里的一切。',
          '从此，蓝蓝和绿绿每天都会来城堡附近巡逻，确保没有坏人来破坏这里的平静。它们也成了海洋里最受尊敬的小英雄。'
        ];
        pageCount = 7;
        break;
      default:
        title = '未知故事';
        content = ['故事内容加载失败，请稍后再试。'];
        pageCount = 1;
    }
    
    setStoryTitle(title);
    setStoryContent(content);
     setTotalPages(pageCount);
    
    // 初始化插图提示词
    if (content[currentPage - 1]) {
      const enhanceForImageGeneration = (text: string): string => {
        // 解析故事中可能包含的关键元素
        const charactersMatch = text.match(/([^\s]+小[狐狸熊兔子海豚松鼠鹰猫]|[^\s]+公主|[^\s]+王子|[^\s]+侠)/);
        const settingMatch = text.match(/(森林|海洋|天空|城堡|山洞|草原|花园|村庄)/);
        const actionMatch = text.match(/(玩耍|冒险|发现|帮助|战斗|寻找|遇见|探索)/);
        
        let character = charactersMatch ? charactersMatch[0] : '可爱的小动物';
        let setting = settingMatch ? settingMatch[0] : '美丽的自然环境';
        let action = actionMatch ? actionMatch[0] : '快乐地生活';
        
        // 为AI图像生成创建更丰富的提示词
        const styleWords = ['童话风格', '儿童插画', '色彩鲜艳', '可爱风格', '梦幻场景'];
        const selectedStyle = styleWords[Math.floor(Math.random() * styleWords.length)];
        
        return `${selectedStyle}, 高清插画, ${character}在${setting}里${action}, 充满想象力, 温馨治愈, 适合儿童观看, 细节丰富, 明亮色调`;
      };
      
      const enhancedPrompt = enhanceForImageGeneration(content[currentPage - 1]);
      setIllustrationPrompt(`${enhancedPrompt} 童话故事:《${title}》`);
    } else {
      setIllustrationPrompt(`为童话故事《${title}》第${currentPage}页生成插图`);
    }
  };
  
  // 检查故事是否已收藏
  const checkIfCollected = (id: string) => {
    try {
      const collections = localStorage.getItem('collectedStories');
      if (collections) {
        const parsedCollections: { id: string }[] = JSON.parse(collections);
        const isInCollection = parsedCollections.some(story => story.id === id);
        setIsCollected(isInCollection);
      }
    } catch (error) {
      console.error('Failed to check collection status:', error);
    }
  };
  
  // 切换收藏状态
  const toggleCollection = () => {
    try {
      const collections = localStorage.getItem('collectedStories');
      let parsedCollections: { id: string; title: string; description: string; pageCount: number; date: string }[] = [];
      
      if (collections) {
        parsedCollections = JSON.parse(collections);
      }
      
      if (isCollected) {
        // 取消收藏
        parsedCollections = parsedCollections.filter(story => story.id !== storyId);
        toast('已取消收藏');
      } else {
        // 检查故事是否已在收藏中
        const isAlreadyCollected = parsedCollections.some(story => story.id === storyId);
        
        if (!isAlreadyCollected) {
          // 添加收藏
          const newCollection = {
            id: storyId || '',
            title: storyTitle,
            description: storyContent[0]?.substring(0, 100) + '...' || '',
            pageCount: totalPages,
            date: new Date().toLocaleDateString('zh-CN')
          };
          parsedCollections.push(newCollection);
          toast('收藏成功');
        } else {
          toast('故事已在收藏中');
        }
      }
      
      // 保存回localStorage前确保数据唯一
      const uniqueCollections = Array.from(new Map(parsedCollections.map(story => [story.id, story])).values());
      localStorage.setItem('collectedStories', JSON.stringify(uniqueCollections));
      setIsCollected(!isCollected);
    } catch (error) {
      console.error('Failed to update collection status:', error);
      toast('操作失败，请稍后再试');
    }
  };
  
  // 开始/停止朗读
  const toggleReading = () => {
    if (!isReading) {
      // 检查浏览器是否支持语音合成
      if (!('speechSynthesis' in window)) {
        toast('您的浏览器不支持语音朗读功能，请更换浏览器后重试');
        return;
      }
      
      // 检查是否有可用的语音
      const voices = window.speechSynthesis.getVoices();
      if (voices.length === 0) {
        // 尝试强制刷新语音列表
        window.speechSynthesis.onvoiceschanged = () => {
          const refreshedVoices = window.speechSynthesis.getVoices();
          performReading(refreshedVoices);
          window.speechSynthesis.onvoiceschanged = null;
        };
        
        // 某些浏览器需要触发一次才能加载语音
        window.speechSynthesis.speak(new SpeechSynthesisUtterance(''));
        
        toast('正在初始化语音引擎...');
        return;
      } else {
        performReading(voices);
      }
    } else {
      // 停止朗读
      window.speechSynthesis.cancel();
      setIsReading(false);
      toast('已停止朗读');
    }
  };
  
  // 执行朗读的辅助函数
  const performReading = (voices: SpeechSynthesisVoice[]) => {
    const content = storyContent[currentPage - 1];
    if (!content) {
      toast('当前页面没有可读内容');
      return;
    }
    
    try {
      const utterance = new SpeechSynthesisUtterance(content);
      utterance.lang = 'zh-CN';
      
      // 尝试查找中文语音
      const chineseVoice = voices.find(voice => 
        voice.lang === 'zh-CN' || voice.lang === 'zh' || voice.name.includes('Chinese') || voice.name.includes('中文')
      );
      
      // 如果找到中文语音，则使用它
      if (chineseVoice) {
        utterance.voice = chineseVoice;
      }
      
      // 设置语音参数
      utterance.volume = 1; // 音量 (0-1)
      utterance.rate = 0.9; // 语速 (0.1-10)
      utterance.pitch = 1; // 音高 (0-2)
      
      // 朗读结束时更新状态
      utterance.onend = () => {
        setIsReading(false);
      };
      
      // 处理可能的错误
      utterance.onerror = (event) => {
        console.error('Speech synthesis error:', event.error);
        setIsReading(false);
        toast('朗读过程中发生错误，请稍后再试');
      };
      
      // 开始朗读
      window.speechSynthesis.speak(utterance);
      setIsReading(true);
      toast('正在朗读...');
    } catch (error) {
      console.error('Failed to start speech synthesis:', error);
      toast('无法启动语音朗读，请检查您的浏览器设置');
    }
  };
  
  // 分享故事
  const handleShare = () => {
    toast('分享功能即将上线');
  };
  
   // 生成新的插图
  const generateNewImage = async () => {
    setIsGeneratingImage(true);
    
    try {
      // 模拟AI生成图片的过程
      await new Promise(resolve => setTimeout(resolve, 1500));
      
      // 简化生成逻辑，直接使用默认图片
      toast('图片生成成功！');
    } catch (error) {
      console.error('图片生成失败:', error);
      toast('图片生成失败，请稍后再试');
    } finally {
      setIsGeneratingImage(false);
    }
  };
  
  // 调用用户智能体生成图片
  const generateImageWithUserAgent = async () => {
    setIsGeneratingImage(true);
    
    try {
      toast('正在调用智能体生成图片，请稍候...');
      
      // 调用用户智能体生成图片
      const currentContent = storyContent[currentPage - 1] || '';
      const enhancedPrompt = enhanceForImageGeneration(currentContent);
      const fullPrompt = `${enhancedPrompt} 童话故事:《${storyTitle}》, 关键词:${generatedStory?.keywords.join(', ') || '童话, 冒险, 友谊'}`;
      
      // 调用新添加的智能体图片生成函数
      await generateImageWithAgent(fullPrompt);
      
      // 刷新图片显示
      setIllustrationPrompt(`${fullPrompt} 智能体生成版本:${Date.now()}`);
      toast('智能体图片生成成功！');
    } catch (error) {
      console.error('智能体生成图片失败:', error);
      toast('智能体生成图片失败，请稍后再试');
    } finally {
      setIsGeneratingImage(false);
    }
  };
  
  // 用于增强图片生成的辅助函数
  const enhanceForImageGeneration = (text: string): string => {
    // 解析故事中可能包含的关键元素
    const charactersMatch = text.match(/([^\s]+小[狐狸熊兔子海豚松鼠鹰猫]|[^\s]+公主|[^\s]+王子|[^\s]+侠)/);
    const settingMatch = text.match(/(森林|海洋|天空|城堡|山洞|草原|花园|村庄)/);
    const actionMatch = text.match(/(玩耍|冒险|发现|帮助|战斗|寻找|遇见|探索)/);
    
    let character = charactersMatch ? charactersMatch[0] : '可爱的小动物';
    let setting = settingMatch ? settingMatch[0] : '美丽的自然环境';
    let action = actionMatch ? actionMatch[0] : '快乐地生活';
    
    // 为AI图像生成创建更丰富的提示词
    const styleWords = ['童话风格', '儿童插画', '色彩鲜艳', '可爱风格', '梦幻场景'];
    const selectedStyle = styleWords[Math.floor(Math.random() * styleWords.length)];
    
    // 完全使用中文描述，避免任何英文出现
    return `${selectedStyle}, 高清插画, ${character}在${setting}里${action}, 充满想象力, 温馨治愈, 适合儿童观看, 细节丰富, 明亮色调`;
  };
  
  // 打开智能创作助手
  const openAIAssistant = () => {
    setShowAssistant(!showAssistant);
    // 关闭其他面板
    setShowCharacterChat(false);
    setShowStoryExpander(false);
  };
  
  // 打开角色对话面板
  const openCharacterChat = () => {
    setShowCharacterChat(!showCharacterChat);
    // 关闭其他面板
    setShowAssistant(false);
    setShowStoryExpander(false);
    
    // 如果是首次打开对话面板，添加欢迎消息
    if (chatMessages.length === 0) {
      const welcomeMessage: CharacterDialogue = {
        characterName: selectedCharacter,
        message: `你好！我是${selectedCharacter}，很高兴和你聊天！有什么想对我说的吗？`,
        isUser: false,
        timestamp: Date.now()
      };
      setChatMessages([welcomeMessage]);
    }
  };
  
  // 打开故事扩展面板
  const openStoryExpander = () => {
    setShowStoryExpander(!showStoryExpander);
    // 关闭其他面板
    setShowAssistant(false);
    setShowCharacterChat(false);
  };
  
  // 发送消息给角色
  const sendMessage = async () => {
    if (!userMessage.trim()) return;
    
    // 添加用户消息
    const userMessageObj: CharacterDialogue = {
      characterName: '用户',
      message: userMessage.trim(),
      isUser: true,
      timestamp: Date.now()
    };
    
    setChatMessages(prev => [...prev, userMessageObj]);
    setUserMessage('');
    setIsGeneratingReply(true);
    
    try {
      // 获取当前故事上下文
      const context = storyContent[currentPage - 1] || '';
      
      // 调用AI生成角色回复
      const reply = await generateCharacterResponse(selectedCharacter, userMessage.trim(), context);
      
      // 添加角色回复
      const replyMessage: CharacterDialogue = {
        characterName: selectedCharacter,
        message: reply,
        isUser: false,
        timestamp: Date.now()
      };
      
      setChatMessages(prev => [...prev, replyMessage]);
    } catch (error) {
      console.error('Failed to generate character response:', error);
      toast('回复生成失败，请稍后再试');
    } finally {
      setIsGeneratingReply(false);
    }
  };
  
  // 选择对话角色
  const selectCharacter = (character: string) => {
    setSelectedCharacter(character);
    // 清空之前的对话记录
    setChatMessages([]);
    
    // 添加新角色的欢迎消息
    const welcomeMessage: CharacterDialogue = {
      characterName: character,
      message: `你好！我是${character}，很高兴和你聊天！有什么想对我说的吗？`,
      isUser: false,
      timestamp: Date.now()
    };
    setChatMessages([welcomeMessage]);
  };
  
  // 扩展故事内容
  const expandContent = async () => {
    setIsExpandingContent(true);
    toast(`正在生成${getExpandTypeLabel(expandType)}...`);
    
    try {
      // 获取当前故事内容
      const currentContent = storyContent[currentPage - 1] || '';
      
      // 调用AI扩展故事内容
      const expanded = await expandStoryContent(currentContent, expandType);
      
      setExpandedContent(expanded);
      toast('内容扩展成功！');
    } catch (error) {
      console.error('Failed to expand story content:', error);
      toast('内容扩展失败，请稍后再试');
    } finally {
      setIsExpandingContent(false);
    }
  };
  
  // 获取扩展类型的中文标签
  const getExpandTypeLabel = (type: string): string => {
    const labels: Record<string, string> = {
      'background': '故事背景',
      'dialogue': '角色对话',
      'description': '场景描写',
      'ending': '故事结局'
    };
    return labels[type] || '故事内容';
  };
  
  // 上一页
  const goToPrevPage = () => {
    if (currentPage > 1) {
      setCurrentPage(currentPage - 1);
    }
  };
  
  // 下一页
  const goToNextPage = () => {
    if (currentPage < totalPages) {
      setCurrentPage(currentPage + 1);
    }
  };
  
   // 调整字体大小
  const changeFontSize = (size: 'small' | 'medium' | 'large') => {
    setFontSize(size);
  };
  
  // 拖动功能实现
  useEffect(() => {
    const handleMouseMove = (e: MouseEvent) => {
      if (!isDragging) return;
      
      const newX = `${e.clientX - dragOffset.x}px`;
      const newY = `${e.clientY - dragOffset.y}px`;
      
      switch(isDragging) {
        case 'chat':
          setChatPosition({ x: newX, y: newY });
          break;
        case 'expander':
          setExpanderPosition({ x: newX, y: newY });
          break;
        case 'assistant':
          setAssistantPosition({ x: newX, y: newY });
          break;
      }
    };
    
    const handleMouseUp = () => {
      setIsDragging(null);
    };
    
    document.addEventListener('mousemove', handleMouseMove);
    document.addEventListener('mouseup', handleMouseUp);
    
    return () => {
      document.removeEventListener('mousemove', handleMouseMove);
      document.removeEventListener('mouseup', handleMouseUp);
    };
  }, [isDragging, dragOffset]);

  // 对话框鼠标按下事件处理
  const handleChatMouseDown = (e: React.MouseEvent) => {
    // 只允许在头部拖动，防止点击按钮时也触发拖动
    if (!(e.target instanceof HTMLElement && e.target.closest('.cursor-move'))) return;
    
    e.preventDefault();
    setIsDragging('chat');
    setDragOffset({
      x: e.clientX - (parseInt(chatPosition.x) || 0),
      y: e.clientY - (parseInt(chatPosition.y) || 0)
    });
  };

  const handleExpanderMouseDown = (e: React.MouseEvent) => {
    // 只允许在头部拖动，防止点击按钮时也触发拖动
    if (!(e.target instanceof HTMLElement && e.target.closest('.cursor-move'))) return;
    
    e.preventDefault();
    setIsDragging('expander');
    setDragOffset({
      x: e.clientX - (parseInt(expanderPosition.x) || 0),
      y: e.clientY - (parseInt(expanderPosition.y) || 0)
    });
  };

  const handleAssistantMouseDown = (e: React.MouseEvent) => {
    // 只允许在头部拖动，防止点击按钮时也触发拖动
    if (!(e.target instanceof HTMLElement && e.target.closest('.cursor-move'))) return;
    
    e.preventDefault();
    setIsDragging('assistant');
    setDragOffset({
      x: e.clientX - (parseInt(assistantPosition.x) || 0),
      y: e.clientY - (parseInt(assistantPosition.y) || 0)
    });
  };
  
  // 未登录时不渲染内容
  if (!isAuthenticated) return null;
  
  // 加载中状态
  if (isLoading) {
    return (
      <div className="min-h-screen bg-gradient-to-b from-pink-50 to-blue-50 flex flex-col items-center justify-center text-gray-800">
        <div className="glass p-8 rounded-xl border border-pink-200 flex flex-col items-center bg-white/80 backdrop-blur-md">
          <div className="animate-spin mb-4 text-pink-400">
            <svg xmlns="http://www.w3.org/2000/svg" width="40" height="40" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round">
              <path d="M12 3v3a6 6 0 0 1 6 6v12" />
            </svg>
          </div>
          <h2 className="text-xl font-semibold text-pink-500 mb-2">加载中</h2>
          <p className="text-gray-500 text-center">正在准备您的故事...</p>
        </div>
      </div>
    );
  }
  
  // 大图查看器
  if (showFullImage) {
    return (
      <div className="fixed inset-0 bg-black/80 flex items-center justify-center z-50 p-4" onClick={() => setShowFullImage(false)}>
        <button 
          className="absolute top-4 right-4 bg-white/20 backdrop-blur-md text-white p-2 rounded-full hover:bg-white/30 transition-colors"
          aria-label="关闭"
        >
          ✕
        </button>
          <div 
               className="max-w-4xl max-h-[90vh] relative"
               onClick={(e) => e.stopPropagation()}
             >
                       <img 
                         // 使用用户提供的图片URL
                         src="https://lf-code-agent.coze.cn/obj/x-ai-cn/307173148162/attachment/image_20251021194848.png"
                         alt={`${storyTitle} - 第${currentPage}页大图`}
                         className="max-w-full max-h-[90vh] object-contain rounded-lg border-4 border-white/80"
          />
          <div className="absolute bottom-4 left-0 right-0 text-center">
            <p className="bg-white/90 backdrop-blur-md text-pink-500 px-4 py-2 rounded-full inline-block shadow-lg">
              {storyTitle} - 第{currentPage}页插图
            </p>
          </div>
        </div>
      </div>
    );
  }
  
  return (
    <div className="min-h-screen bg-gradient-to-b from-pink-50 to-blue-50 flex flex-col pb-24 text-gray-800">
      <div className="container mx-auto flex-1 flex flex-col">
      <Toaster />
      
        {/* 顶部导航栏 */}
       <header className={`${isDark ? 'bg-gray-800/90 border-gray-700' : 'bg-white/80 border-pink-100'} backdrop-blur-md px-4 py-3 flex justify-between items-center shadow-sm`}>
        <div className="flex items-center">
          <button 
            onClick={() => navigate(-1)}
            className={`p-2 mr-3 ${isDark ? 'text-gray-300 hover:text-pink-400 bg-gray-700/50' : 'text-gray-500 hover:text-pink-500 bg-white/50'} transition-colors rounded-full`}
            title="返回"
          >
            <ChevronLeft size={20} />
          </button>
          <h1 className={`text-lg font-bold ${isDark ? 'text-gray-100' : 'text-gray-800'} max-w-[120px] sm:max-w-[200px] truncate`}>{storyTitle}</h1>
        </div>
        <div className="flex space-x-1 sm:space-x-2">
            <button 
              onClick={toggleDarkMode}
              className={`p-2 ${isDark ? 'bg-gray-700 text-yellow-400' : 'bg-gradient-to-r from-pink-100 to-blue-100 text-pink-400'} rounded-full hover:from-pink-200 hover:to-blue-200 transition-colors focus:outline-none focus:ring-2 focus:ring-pink-400 focus:ring-offset-2 focus:ring-offset-white dark:focus:ring-offset-gray-800`}
              title={isDark ? "切换到亮色模式" : "切换到护眼模式"}
            >
            {isDark ? <Sun size={18} /> : <Moon size={18} />}
          </button>
        </div>
        <div className="flex space-x-1 sm:space-x-2">
          <div className="flex flex-col items-center">
            <button 
              onClick={openCharacterChat}
              className="p-2 bg-gradient-to-r from-pink-100 to-blue-100 text-pink-400 rounded-full hover:from-pink-200 hover:to-blue-200 transition-colors relative shadow-sm"
              title="与故事角色对话"
            >
              <MessageCircle size={18} />
              {showCharacterChat && (
                <span className="absolute -top-1 -right-1 w-4 h-4 bg-pink-500 rounded-full border-2 border-white"></span>
              )}
            </button>
            <span className="text-xs text-pink-500 mt-1">角色聊天</span>
          </div>
          <div className="flex flex-col items-center">
            <button 
              onClick={openStoryExpander}
              className="p-2 bg-gradient-to-r from-pink-100 to-blue-100 text-pink-400 rounded-full hover:from-pink-200 hover:to-blue-200 transition-colors relative shadow-sm"
              title="扩展故事内容"
            >
              <Sparkles size={18} />
              {showStoryExpander && (
                <span className="absolute -top-1 -right-1 w-4 h-4 bg-pink-500 rounded-full border-2 border-white"></span>
              )}
            </button>
            <span className="text-xs text-pink-500 mt-1">故事扩展</span>
          </div>
          <div className="flex flex-col items-center">
            <button 
              onClick={openAIAssistant}
              className="p-2 bg-gradient-to-r from-pink-100 to-blue-100 text-pink-400 rounded-full hover:from-pink-200 hover:to-blue-200 transition-colors relative shadow-sm"
              title="智能创作助手"
            >
                  <Brain size={20} className="text-pink-400" />
              {showAssistant && (
                <span className="absolute -top-1 -right-1 w-4 h-4 bg-pink-500 rounded-full border-2 border-white"></span>
              )}
            </button>
            <span className="text-xs text-pink-500 mt-1">创作助手</span>
          </div>
        </div>
      </header>

      {/* 阅读进度条 */}
      <div className="w-full bg-gray-200 h-1">
        <div 
          className="bg-gradient-to-r from-pink-400 to-blue-400 h-full" 
          style={{ width: `${(currentPage / totalPages) * 100}%` }}
        ></div>
      </div>

      {/* 故事阅读区域 - 更适合儿童的布局 */}
      <main className="flex-1 px-4 py-6 flex flex-col items-center justify-center">
        <div className="w-full max-w-2xl bg-white rounded-xl border-2 border-pink-200 p-4 md:p-6 shadow-md card-gradient">
            {/* 故事插图区域 - 更大更醒目 */}
            <div className="flex flex-col items-center justify-center mb-6 relative">
              <div className="w-full max-w-md h-40 sm:h-56 md:h-64 rounded-lg overflow-hidden bg-gradient-to-br from-pink-50 to-blue-50 flex items-center justify-center border-2 border-pink-100 shadow-sm">
                      <img
                        src="https://lf-code-agent.coze.cn/obj/x-ai-cn/307173148162/attachment/image_20251021194848.png"
                        alt={`${storyTitle} - 第${currentPage}页插图`}
                        className="w-full h-full object-contain cursor-pointer transform transition-transform duration-300 hover:scale-105"
                        onClick={() => setShowFullImage(true)}
                        loading="lazy"
                      />
              </div>
            <p className="text-sm text-gray-500 mt-2">第 {currentPage} 页插图</p>
               {/* 刷新图片按钮 */}
               <button 
                onClick={() => {
                  // 添加随机参数清除缓存
                  const currentContent = storyContent[currentPage - 1] || '';
                  const randomSeed = Math.floor(Math.random() * 10000);
                  setIllustrationPrompt(prev => `${prev} 重试种子:${randomSeed}`);
                }}
                className="text-xs text-blue-500 mt-1 flex items-center hover:text-blue-400 transition-colors"
                title="换一张插图"
              >
                <RefreshCw size={12} className="mr-1" />
                 换张插图
              </button>
           </div>
          
          {/* 故事内容 - 更大的字体和行高 */}
          <div className={`mx-auto mb-6 ${
            fontSize === 'small' ? 'text-base' : 
            fontSize === 'large' ? 'text-xl' : 'text-lg'
          }`}>
            <p className="text-gray-700 leading-relaxed tracking-wide">{storyContent[currentPage - 1] || '故事内容加载失败'}</p>
            
            {/* 显示扩展的内容 */}
            {expandedContent && (
              <div className="mt-4 p-4 bg-gradient-to-r from-pink-50 to-blue-50 rounded-lg border border-pink-100">
                <h4 className="text-sm font-medium text-pink-500 mb-2 flex items-center">
                  <Sparkles size={14} className="mr-1" />
                  {getExpandTypeLabel(expandType)}
                </h4>
                <p className="text-gray-700">{expandedContent}</p>
              </div>
            )}
          </div>
          
           {/* 功能按钮 - 智能体交互方式 */}
          <div className="flex flex-wrap justify-between items-center gap-3">
            <button 
              onClick={toggleReading}
              className="flex-1 bg-gradient-to-r from-pink-100 to-blue-100 text-pink-500 py-2.5 px-4 rounded-lg flex items-center justify-center hover:from-pink-200 hover:to-blue-200 transition-colors btn-gradient text-base"
              title={isReading ? "停止朗读" : "开始朗读"}
            >
              <Volume2 size={20} className="mr-2" />
              {isReading ? '停止朗读' : '童话家读给我听'}
            </button>
            
            <div className="flex space-x-2">
              <button 
                onClick={() => changeFontSize('small')}
                className={`w-10 h-10 flex items-center justify-center rounded-full ${
                  fontSize === 'small' ? 'bg-pink-100 text-pink-500' : 'bg-gray-100 text-gray-500'
                }`}
                title="小字体"
              >
                A
              </button>
              <button 
                onClick={() => changeFontSize('medium')}
                className={`w-12 h-12 flex items-center justify-center rounded-full ${
                  fontSize === 'medium' ? 'bg-pink-100 text-pink-500' : 'bg-gray-100 text-gray-500'
                }`}
                title="中字体"
              >
                A
              </button>
              <button 
                onClick={() => changeFontSize('large')}
                className={`w-14 h-14 flex items-center justify-center rounded-full ${
                  fontSize === 'large' ? 'bg-pink-100 text-pink-500' : 'bg-gray-100 text-gray-500'
                }`}
                title="大字体"
              >
                A
              </button>
            </div>
            
            <div className="flex space-x-2">
              <button 
                onClick={toggleCollection}
                className={`p-3 rounded-full transition-all duration-300 ${
                  isCollected 
                    ? 'bg-pink-100 text-pink-500 transform scale-110' 
                    : 'bg-gray-100 text-gray-400 hover:text-pink-500 hover:bg-pink-100'
                }`}
                title={isCollected ? "取消收藏" : "添加收藏"}
              >
                <Heart size={24} className={isCollected ? 'fill-current' : ''} />
              </button>
              
              <button 
                onClick={openCharacterChat}
                className="p-3 bg-gradient-to-r from-pink-100 to-blue-100 text-pink-400 rounded-full hover:from-pink-200 hover:to-blue-200 transition-colors"
                title="与故事角色聊天"
              >
                <MessageCircle size={24} />
              </button>
            </div>
          </div>
        </div>
        
        {/* 分页控制 - 更大更醒目 */}
        <div className="mt-6 flex items-center justify-center w-full max-w-2xl">
          <button 
            onClick={goToPrevPage}
            disabled={currentPage === 1}
            className={`px-6 py-3 rounded-lg transition-all duration-300 ${
              currentPage === 1 
                ? 'bg-gray-100 text-gray-400 cursor-not-allowed' 
                : 'bg-gradient-to-r from-pink-100 to-blue-100 text-pink-500 hover:from-pink-200 hover:to-blue-200 btn-gradient shadow-sm'
            } text-base font-medium`}
            title="上一页"
          >
            上一页
          </button>
          
          <div className="mx-6 text-base font-medium text-gray-600 bg-white/80 px-4 py-2 rounded-full border border-pink-100 shadow-sm">
            第 {currentPage} 页 / 共 {totalPages} 页
          </div>
          
          <button 
            onClick={goToNextPage}
            disabled={currentPage === totalPages}
            className={`px-6 py-3 rounded-lg transition-all duration-300 ${
              currentPage === totalPages 
                ? 'bg-gray-100 text-gray-400 cursor-not-allowed' 
                : 'bg-gradient-to-r from-pink-100 to-blue-100 text-pink-500 hover:from-pink-200 hover:to-blue-200 btn-gradient shadow-sm'
            } text-base font-medium`}
            title="下一页"
          >
            下一页
          </button>
        </div>
        
        {/* 亲子互动提示 */}
        <div className="mt-6 bg-gradient-to-r from-pink-100 to-blue-100 p-4 rounded-xl border border-pink-200 shadow-sm max-w-2xl w-full">
          <div className="flex items-center">
            <div className="text-2xl mr-3">👨‍👩‍👧‍👦</div>
            <div>
              <h4 className="text-pink-600 font-medium">亲子互动小提示</h4>
              <p className="text-gray-600 text-sm mt-1">读完这一页后，可以和孩子讨论故事中的情节和角色感受，培养孩子的阅读理解能力和想象力。</p>
            </div>
          </div>
        </div>
      </main>

        {/* 智能创作助手 - 更适合儿童和家长的界面 */}
      {showAssistant && (
        <div 
          className="fixed bg-white/90 backdrop-blur-md border-2 border-pink-200 rounded-lg p-4 max-w-md w-80 z-20 shadow-lg cursor-move"
          style={{ left: assistantPosition.x, top: assistantPosition.y }}
          onMouseDown={handleAssistantMouseDown}
        >
          <div className="flex justify-between items-start mb-2 cursor-move">
            <h3 className="font-medium text-pink-500 flex items-center text-base">
              <Brain size={18} className="mr-1" />
              创作魔法助手
            </h3>
            <button 
              onClick={openAIAssistant}
              className="text-gray-500 hover:text-gray-700 cursor-pointer p-1 rounded-full hover:bg-pink-50"
              title="关闭"
            >
              ✕
            </button>
          </div>
          
          <div className="bg-gradient-to-r from-pink-50 to-blue-50 p-3 rounded-lg border border-pink-100 mb-3">
            <p className="text-sm text-pink-500">
              魔法助手已为《{storyTitle}》准备了创作灵感和教育建议！
            </p>
          </div>
          
          {/* 故事分析面板 */}
          <div className="space-y-3 mb-3">
            {/* 故事主题分析 */}
            <div className="bg-white p-3 rounded-lg border border-pink-100 shadow-sm">
              <p className="text-sm text-gray-700">
                <span className="text-pink-500 font-medium">故事主题：</span> 
                {generatedStory?.keywords[0] || '友谊与冒险'}
              </p>
              <p className="text-xs text-gray-500 mt-1">
                主题明确，适合培养孩子的价值观
              </p>
            </div>
            
            {/* 核心价值观 */}
            <div className="bg-white p-3 rounded-lg border border-pink-100 shadow-sm">
              <p className="text-sm text-gray-700">
                <span className="text-pink-500 font-medium">教育意义：</span> 
                {generatedStory?.moral || '勇敢面对困难，珍惜友谊'}
              </p>
            </div>
            
            {/* 目标受众 */}
            <div className="bg-white p-3 rounded-lg border border-pink-100 shadow-sm">
              <p className="text-sm text-gray-700">
                <span className="text-pink-500 font-medium">适合年龄：</span>
                4-8岁
              </p>
              <div className="w-full bg-gray-200 rounded-full h-1.5 mt-1.5">
                <div className="bg-gradient-to-r from-pink-400 to-blue-400 h-1.5 rounded-full" style={{ width: '70%' }}></div>
              </div>
            </div>
          </div>
          
          {/* 创作建议面板 */}
          <div className="space-y-3 mb-3">
            <h4 className="text-sm font-medium text-pink-500 flex items-center">
              <Sparkles size={14} className="mr-1" />
              亲子创作建议
            </h4>
            
            {/* 情节发展建议 */}
            <div className="bg-white p-3 rounded-lg border border-pink-100 shadow-sm">
              <p className="text-xs text-pink-500 font-medium mb-1">一起编故事</p>
              <p className="text-xs text-gray-700">
                和孩子一起想象第{Math.min(currentPage + 1, totalPages)}页的剧情发展，可以问问孩子："{selectedCharacter || '主角'}接下来会遇到谁？会发生什么有趣的事情？"
              </p>
              <button 
                onClick={() => {
                  setShowStoryExpander(true);
                  setShowAssistant(false);
                  setExpandType('dialogue');
                  toast('已切换到故事扩展器，和孩子一起创作对话吧！');
                }}
                className="mt-1.5 text-xs text-blue-500 hover:text-blue-400"
              >
                一起创作 →
              </button>
            </div>
            
            {/* 角色塑造建议 */}
            <div className="bg-white p-3 rounded-lg border border-pink-100 shadow-sm">
              <p className="text-xs text-pink-500 font-medium mb-1">角色互动</p>
              <p className="text-xs text-gray-700">
                让孩子尝试模仿{selectedCharacter || '主角'}的语气说话，这能帮助孩子更好地理解角色特点和故事情感。
              </p>
              <button 
                onClick={() => {
                  setShowCharacterChat(true);
                  setShowAssistant(false);
                  toast('已切换到角色对话，让孩子和角色直接交流吧！');
                }}
                className="mt-1.5 text-xs text-blue-500 hover:text-blue-400"
              >
                和角色聊天 →
              </button>
            </div>
          </div>
          
          {/* 实用工具面板 */}
          <div className="mt-3 pt-3 border-t border-pink-100">
            <h4 className="text-sm font-medium text-pink-500 mb-2">创作魔法工具</h4>
            
            <div className="grid grid-cols-2 gap-2 mb-2">
              <button 
                onClick={() => {
                  setShowStoryExpander(true);
                  setShowAssistant(false);
                  setExpandType('background');
                  toast('已切换到故事扩展器，丰富故事背景');
                }}
                className="text-xs bg-gradient-to-r from-pink-100 to-blue-100 text-pink-500 py-1.5 px-2 rounded-lg hover:from-pink-200 hover:to-blue-200 transition-colors text-center"
                title="丰富故事背景"
              >
                丰富故事背景
              </button>
              <button 
                onClick={() => {
                  setShowStoryExpander(true);
                  setShowAssistant(false);
                  setExpandType('description');
                  toast('已切换到故事扩展器，美化场景描写');
                }}
                className="text-xs bg-gradient-to-r from-pink-100 to-blue-100 text-pink-500 py-1.5 px-2 rounded-lg hover:from-pink-200 hover:to-blue-200 transition-colors text-center"
                title="美化场景描写"
              >
                美化场景描写
              </button>
              <button 
                onClick={generateImageWithUserAgent}
                disabled={isGeneratingImage}
                className={`text-xs py-1.5 px-2 rounded-lg transition-colors text-center ${
                  isGeneratingImage 
                    ? 'bg-gray-100 text-gray-400 cursor-not-allowed' 
                    : 'bg-gradient-to-r from-pink-100 to-blue-100 text-pink-500 hover:from-pink-200 hover:to-blue-200'
                }`}
                title="重新生成插图"
              >
                {isGeneratingImage ? '生成中...' : '换张插图'}
              </button>
              <button 
                onClick={() => {
                  const currentContent = storyContent[currentPage - 1] || '';
                  if (navigator.clipboard) {
                    navigator.clipboard.writeText(currentContent)
                      .then(() => toast('已复制当前内容到剪贴板'))
                      .catch(() => toast('复制失败，请手动复制'));
                  } else {
                    toast('您的浏览器不支持剪贴板功能');
                  }
                }}
                className="text-xs bg-gradient-to-r from-pink-100 to-blue-100 text-pink-500 py-1.5 px-2 rounded-lg hover:from-pink-200 hover:to-blue-200 transition-colors text-center"
                title="复制当前内容"
              >
                复制内容
              </button>
            </div>
            
            {/* 家长指导按钮 */}
            <button 
              onClick={() => {
                toast('正在生成家长指导建议...');
                // 模拟生成详细报告的过程
                setTimeout(() => {
                  const report = `
《${storyTitle}》家长指导建议

1. 阅读前准备:
   - 和孩子一起看看封面和插图，猜猜故事内容
   - 介绍故事的主要角色和可能的主题

2. 阅读中互动:
   - 适时停下来问问题："你觉得小狐狸接下来会怎么做？"
   - 鼓励孩子模仿角色的动作和语气
   - 讨论故事中的情绪："小狐狸现在是什么心情？你怎么知道的？"

3. 阅读后活动:
   - 和孩子一起画一画故事中的场景或角色
   - 一起续编故事的后续发展
   - 讨论故事中包含的道理和价值观

4. 教育价值:
   - 培养孩子的想象力和创造力
   - 帮助孩子理解不同的情感和社交场景
   - 学习解决问题的方法和积极的价值观

5. 延伸活动:
   - 一起查找与故事主题相关的科普知识
   - 角色扮演，体验故事中的情节
   - 用家中的物品创作故事小剧场`;
                  
                  // 创建并显示详细报告弹窗
                  const reportWindow = window.open('', '_blank');
                  if (reportWindow) {
                    reportWindow.document.write(`
                      <!DOCTYPE html>
                      <html>
                      <head>
                        <title>家长指导建议</title>
                        <meta charset="UTF-8">
                        <meta name="viewport" content="width=device-width, initial-scale=1.0">
                        <style>
                          body { 
                            font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
                            line-height: 1.6;
                            color: #333;
                            max-width: 800px;
                            margin: 0 auto;
                            padding: 20px;
                          }
                          h1 { 
                            color: #ff9bb3;
                            border-bottom: 2px solid #9bd0ff;
                            padding-bottom: 10px;
                          }
                          h2 { color: #9bd0ff; }
                          p { margin-bottom: 10px; }
                          .highlight { background-color: #fdfaff; padding: 10px; border-radius: 8px; border-left: 4px solid #ff9bb3; }
                        </style>
                      </head>
                      <body>
                        <h1>《${storyTitle}》家长指导建议</h1>
                        <div class="highlight">
                          <p>建议生成时间: ${new Date().toLocaleString()}</p>
                          <p>专为家长设计的亲子阅读指导</p>
                        </div>
                        <pre style="white-space: pre-wrap; font-family: inherit;">${report}</pre>
                      </body>
                      </html>
                    `);
                    reportWindow.document.close();
                  }
                  
                  toast('家长指导建议已生成，请查看新打开的窗口');
                }, 1500);
              }}
              className="w-full flex items-center justify-center text-sm bg-gradient-to-r from-pink-500 to-blue-500 text-white py-2 px-3 rounded-lg hover:opacity-90 transition-all duration-300 mt-2 btn-gradient"
              title="获取家长指导建议"
            >
              <MessageSquare size={14} className="mr-2" />
              获取家长指导建议
            </button>
          </div>
        </div>
      )}
      
        {/* 角色对话面板 - 更适合儿童的界面 */}
       {showCharacterChat && (
         <div 
           className="fixed bg-white/90 backdrop-blur-md border-2 border-pink-200 rounded-lg p-4 max-w-md w-80 z-20 shadow-lg flex flex-col h-[70vh] cursor-move"
           style={{ left: chatPosition.x, top: chatPosition.y }}
           onMouseDown={handleChatMouseDown}
         >
           <div className="flex justify-between items-start mb-2 cursor-move">
             <h3 className="font-medium text-pink-500 flex items-center text-base">
               <MessageCircle size={18} className="mr-1" />
               和{selectedCharacter}聊天
             </h3>
             <button 
               onClick={openCharacterChat}
               className="text-gray-500 hover:text-gray-700 cursor-pointer p-1 rounded-full hover:bg-pink-50"
               title="关闭"
             >
               ✕
             </button>
           </div>
           
           {/* 角色选择器 */}
           <div className="flex space-x-2 mb-3 overflow-x-auto pb-2">
             {['小狐狸', '小熊', '小兔子', '小海豚', '小松鼠', '猫头鹰', '小龙'].map(character => (
               <button
                 key={character}
                 onClick={() => selectCharacter(character)}
                 className={`px-3 py-1.5 rounded-full text-sm whitespace-nowrap transition-colors ${
                   selectedCharacter === character
                     ? 'bg-gradient-to-r from-pink-100 to-blue-100 text-pink-500 shadow-sm'
                     : 'bg-gray-100 text-gray-600 hover:bg-gray-200'
                 } cursor-pointer`}
               >
                 {character}
               </button>
             ))}
           </div>
           
           {/* AI功能提示 */}
           <div className="bg-gradient-to-r from-pink-50 to-blue-50 p-2 rounded-lg border border-pink-100 mb-3">
             <p className="text-xs text-pink-500">
               你可以和故事里的角色聊天，问他们问题，了解他们的想法！
             </p>
           </div>
           
           {/* 对话消息列表 */}
           <div className="flex-1 overflow-y-auto space-y-3 p-2">
             {chatMessages.map((msg, index) => (
               <div 
                 key={index} 
                 className={`flex ${msg.isUser ? 'justify-end' : 'justify-start'} animate-fadeIn`}
               >
                 <div className={`max-w-[80%] p-3 rounded-lg ${
                   msg.isUser 
                     ? 'bg-gradient-to-r from-pink-100 to-blue-100 text-gray-800 rounded-br-none shadow-sm' 
                     : 'bg-gray-100 text-gray-800 rounded-bl-none shadow-sm'
                 }`}>
                   {!msg.isUser && (
                     <div className="text-xs text-pink-500 mb-1">{msg.characterName}</div>
                   )}
                   <p className="text-base">{msg.message}</p>
                 </div>
               </div>
             ))}
             
             {isGeneratingReply && (
               <div className="flex justify-start">
                 <div className="max-w-[80%] p-3 rounded-lg bg-gray-100 rounded-bl-none shadow-sm">
                   <div className="text-xs text-pink-500 mb-1">{selectedCharacter}</div>
                   <div className="flex space-x-1">
                     <div className="w-2 h-2 bg-pink-400 rounded-full animate-bounce" style={{ animationDelay: '0ms' }}></div>
                     <div className="w-2 h-2 bg-pink-400 rounded-full animate-bounce" style={{ animationDelay: '200ms' }}></div>
                     <div className="w-2 h-2 bg-pink-400 rounded-full animate-bounce" style={{ animationDelay: '400ms' }}></div>
                   </div>
                 </div>
               </div>
             )}
           </div>
           
           {/* 快速提问按钮 - 儿童友好的问题 */}
           <div className="grid grid-cols-2 gap-2 mb-2">
             <button
               onClick={() => {
                 setUserMessage('你喜欢吃什么呀？');
               }}
               className="text-xs bg-gradient-to-r from-pink-100 to-blue-100 text-pink-500 py-1.5 px-2 rounded-lg hover:from-pink-200 hover:to-blue-200 transition-colors text-center"
             >
               你喜欢吃什么？
             </button>
             <button
               onClick={() => {
                 setUserMessage('你最好的朋友是谁？');
               }}
               className="text-xs bg-gradient-to-r from-pink-100 to-blue-100 text-pink-500 py-1.5 px-2 rounded-lg hover:from-pink-200 hover:to-blue-200 transition-colors text-center"
             >
               你最好的朋友是谁？
             </button>
             <button
               onClick={() => {
                 setUserMessage('你害怕什么？');
               }}
               className="text-xs bg-gradient-to-r from-pink-100 to-blue-100 text-pink-500 py-1.5 px-2 rounded-lg hover:from-pink-200 hover:to-blue-200 transition-colors text-center"
             >
               你害怕什么？
             </button>
             <button
               onClick={() => {
                 setUserMessage('你有什么愿望？');
               }}
               className="text-xs bg-gradient-to-r from-pink-100 to-blue-100 text-pink-500 py-1.5 px-2 rounded-lg hover:from-pink-200 hover:to-blue-200 transition-colors text-center"
             >
               你有什么愿望？
             </button>
           </div>
           
           {/* 消息输入框 - 更大更易使用 */}
           <div className="mt-1 pt-3 border-t border-pink-100 flex">
             <input
               type="text"
               value={userMessage}
               onChange={(e) => setUserMessage(e.target.value)}
               onKeyPress={(e) => e.key === 'Enter' && !isGeneratingReply && sendMessage()}
               placeholder={`和${selectedCharacter}说点什么吧...`}
               className="flex-1 px-3 py-2.5 rounded-l-lg border-2 border-pink-100 focus:outline-none focus:ring-2 focus:ring-pink-400 text-base"
               disabled={isGeneratingReply}
             />
             <button
               onClick={sendMessage}
               disabled={isGeneratingReply || !userMessage.trim()}
               className={`px-4 py-2.5 rounded-r-lg transition-colors ${
                 isGeneratingReply || !userMessage.trim()
                   ? 'bg-gray-100 text-gray-400 cursor-not-allowed'
                   : 'bg-gradient-to-r from-pink-100 to-blue-100 text-pink-500 hover:from-pink-200 hover:to-blue-200 cursor-pointer font-medium'
               }`}
               title="发送消息"
             >
               发送
             </button>
           </div>
         </div>
      )}
      
         {/* 故事扩展面板 - 更适合儿童和家长的界面 */}
       {showStoryExpander && (
         <div 
           className="fixed bg-white/90 backdrop-blur-md border-2 border-pink-200 rounded-lg p-4 max-w-md w-80 z-20 shadow-lg cursor-move"
           style={{ left: expanderPosition.x, top: expanderPosition.y }}
           onMouseDown={handleExpanderMouseDown}
         >
           <div className="flex justify-between items-start mb-2 cursor-move">
             <h3 className="font-medium text-pink-500 flex items-center text-base">
               <Sparkles size={18} className="mr-1" />
               故事魔法扩展器
             </h3>
             <button 
               onClick={openStoryExpander}
               className="text-gray-500 hover:text-gray-700 cursor-pointer p-1 rounded-full hover:bg-pink-50"
               title="关闭"
             >
               ✕
             </button>
           </div>
           
           <div className="bg-gradient-to-r from-pink-50 to-blue-50 p-3 rounded-lg border border-pink-100 mb-3">
             <p className="text-sm text-pink-500">
               使用魔法扩展器让故事变得更加精彩有趣！
             </p>
           </div>
           
           {/* 扩展类型选择 */}
           <div className="grid grid-cols-2 gap-2 mb-3">
             {[
               { id: 'background', label: '故事背景', icon: '🏞️', desc: '丰富故事发生的背景世界' },
               { id: 'dialogue', label: '角色对话', icon: '💬', desc: '添加角色之间的精彩对话' },
               { id: 'description', label: '场景描写', icon: '🎨', desc: '详细描绘故事中的环境场景' },
               { id: 'ending', label: '故事结局', icon: '🏁', desc: '为故事创建不同的结局版本' }
             ].map(type => (
               <button
                 key={type.id}
                 onClick={() => setExpandType(type.id as any)}
                 className={`flex items-center justify-center p-2 rounded-lg border transition-colors ${
                   expandType === type.id
                     ? 'border-pink-400 bg-gradient-to-br from-pink-100 to-blue-100 text-pink-500 shadow-sm'
                     : 'border-gray-200 bg-white text-gray-700 hover:border-pink-300'
                 } cursor-pointer`}
                 title={type.desc}
               >
                 <span className="mr-1">{type.icon}</span>
                 <span className="text-sm">{type.label}</span>
               </button>
             ))}
           </div>
           
           {/* 扩展选项 */}
           <div className="mb-3 bg-gray-50 p-3 rounded-lg border border-pink-100">
             <h4 className="text-xs font-medium text-gray-500 mb-2">魔法选项</h4>
             <div className="space-y-2">
               <div className="flex items-center">
                 <input 
                   type="checkbox" 
                   id="keep-character" 
                   defaultChecked 
                   className="w-4 h-4 text-pink-500 focus:ring-pink-400 border-pink-300 rounded" 
                 />
                 <label htmlFor="keep-character" className="ml-2 text-xs text-gray-700">保持角色性格</label>
               </div>
               <div className="flex items-center">
                 <input 
                   type="checkbox" 
                   id="rich-imagery" 
                   defaultChecked 
                   className="w-4 h-4 text-pink-500 focus:ring-pink-400 border-pink-300 rounded" 
                 />
                 <label htmlFor="rich-imagery" className="ml-2 text-xs text-gray-700">丰富细节描写</label>
               </div>
               <div className="flex items-center">
                 <input 
                   type="checkbox" 
                   id="child-friendly" 
                   defaultChecked 
                   className="w-4 h-4 text-pink-500 focus:ring-pink-400 border-pink-300 rounded" 
                 />
                 <label htmlFor="child-friendly" className="ml-2 text-xs text-gray-700">适合小朋友阅读</label>
               </div>
             </div>
           </div>
           
           {/* 自定义提示输入 */}
           <div className="mb-3">
             <h4 className="text-xs font-medium text-gray-500 mb-2">你的想法（可选）</h4>
             <textarea
               placeholder={`告诉魔法扩展器你想怎么扩展${getExpandTypeLabel(expandType)}...`}
               className="w-full px-3 py-2 text-sm border-2 border-pink-100 rounded-lg focus:outline-none focus:ring-2 focus:ring-pink-400 h-24 resize-none"
             />
           </div>
           
           {/* 扩展内容预览 */}
           {expandedContent && (
             <div className="mb-3 p-3 bg-gray-50 rounded-lg border border-pink-100">
               <div className="flex justify-between items-center mb-2">
                 <h4 className="text-sm font-medium text-pink-500 flex items-center">
                   <Sparkles size={14} className="mr-1" />
                   魔法扩展结果
                 </h4>
                 <div className="flex space-x-1">
                   <button 
                     onClick={() => {
                       // 将扩展内容添加到当前故事页面
                       if (navigator.clipboard) {
                         navigator.clipboard.writeText(expandedContent)
                           .then(() => toast('已复制扩展内容到剪贴板'))
                           .catch(() => toast('复制失败，请手动复制'));
                       } else {
                         toast('您的浏览器不支持剪贴板功能');
                       }
                     }}
                     className="text-xs text-blue-500 hover:text-blue-400"
                     title="复制扩展内容"
                   >
                     复制
                   </button>
                   <button 
                     onClick={() => setExpandedContent('')}
                     className="text-xs text-gray-400 hover:text-gray-600"
                     title="清除扩展内容"
                   >
                     清除
                   </button>
                 </div>
               </div>
               <p className="text-sm text-gray-700">{expandedContent}</p>
             </div>
           )}
           
           {/* 生成按钮 */}
           <button
             onClick={expandContent}
             disabled={isExpandingContent}
             className={`w-full flex items-center justify-center text-base bg-gradient-to-r from-pink-500 to-blue-500 text-white py-2.5 px-3 rounded-lg hover:opacity-90 transition-all duration-300 ${
               isExpandingContent ? 'opacity-70 cursor-not-allowed' : ''
             } btn-gradient cursor-pointer shadow-sm`}
             title="施展魔法，生成扩展内容"
           >
             {isExpandingContent ? '魔法生效中...' : `施展魔法 ${getExpandTypeLabel(expandType)}`}
           </button>
           
           {/* 使用建议 */}
           <div className="mt-3 pt-3 border-t border-pink-100">
             <p className="text-xs text-gray-500 flex items-center">
               <Sparkles size={12} className="mr-1 text-pink-400" />
               提示: 生成后可以和孩子一起修改完善故事内容
             </p>
           </div>
         </div>
       )}

      {/* 底部导航栏 - 更大更醒目 */}
      <nav className="fixed bottom-0 left-0 right-0 bg-white/95 backdrop-blur-md border-t-2 border-pink-200 h-20 flex justify-around items-center z-10 shadow-md">
        <Link to="/home" className="flex flex-col items-center justify-center text-gray-500 hover:text-pink-500 transition-colors">
          <span className="text-2xl">🏠</span>
          <span className="text-sm mt-1 font-medium">首页</span>
        </Link>
        <Link to="/generate" className="flex flex-col items-center justify-center text-gray-500 hover:text-pink-500 transition-colors">
          <span className="text-2xl">✨</span>
          <span className="text-sm mt-1 font-medium">创作</span>
        </Link>
        <Link to="/collection" className="flex flex-col items-center justify-center text-gray-500 hover:text-pink-500 transition-colors">
          <span className="text-2xl">❤️</span>
          <span className="text-sm mt-1 font-medium">收藏</span>
        </Link>
        <Link to="/agent" className="flex flex-col items-center justify-center text-gray-500 hover:text-pink-500 transition-colors">
          <span className="text-2xl">🤖</span>
          <span className="text-sm mt-1 font-medium">助手</span>
        </Link>
      </nav>
      </div>
    </div>
  );


}